<template>
	<div id="departmentSteps" class="depart-wrap" :style="sceneid==='sstbg'?'height:640px;':''">
		<el-steps :active="this.stepscode" finish-status="success" simple style="top:80px;position:relative">
			<el-step :title="stepTitle.step0"></el-step>
			<el-step :title="stepTitle.step1"></el-step>
			<el-step :title="stepTitle.step2"></el-step>
			<el-step :title="stepTitle.step3"></el-step>
			<el-step :title="stepTitle.step4"></el-step>
		</el-steps>
		<mzrq v-if="stepscode===0" @selectDate="selectDate"></mzrq>
		<mzks v-else-if="stepscode===1" @selectDept="selectDept"></mzks>
		<mzys v-else-if="stepscode===2" @selectDoct="selectDoct"></mzys>
		<mzsj v-else @selectTime="selectTime" :selectedDoc="selectTime"></mzsj>
		<vUser />
	</div>
</template>
<script>
	import Mzrq from "@c/steps/mzrq"
	import Mzks from "@c/steps/mzks"
	import Mzys from "@c/steps/mzys"
	import Mzsj from "@c/steps/mzsj"
	export default {
		name: "Steps",
		components: {
			Mzrq,
			Mzks,
			Mzys,
			Mzsj
		},
		data() {
			return {
				sceneid: this.$store.state.terminfo.seceninfo.sceneid,
				selectedDoc: {} // 已选择医生的信息
			}
		},
		props: {
			stepscode: Number,
			stepTitle: Object,
			appointmentInfo: Object
		},
		methods: {
			// 选择日期
			selectDate(data) {
				this.$emit('selectDate', data)
			},
			// 选择科室
			selectDept(data) {
				this.$emit('selectDept', data)
			},
			// 选择医生
			selectDoct(data) {
				this.$emit('selectDoct', data)
				this.selectedDoc = data
				console.log("this.selectedDoc=", this.selectedDoc)
			},
			// 选择时间
			selectTime(data) {
				this.$emit('selectTime', data)
			},
			// 上一步
			previousStep() {
				this.$emit('previousStep')
			}
		}
	}
</script>
<style>
	#departmentSteps .el-step.is-simple .el-step__title {
		white-space: nowrap;
		overflow: hidden;
	}
</style>
